<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>index</title>
  <script type="text/javascript" src="/static/bigscreen/static/js/jquery.js"></script>
  <link rel="stylesheet" href="/static/bigscreen/static/css/comon0.css">
</head>
<script>
  $(window).load(function () {
    $(".loading").fadeOut()
  })
  /****/
  $(document).ready(function () {
    var whei = $(window).width()
    $("html").css({ fontSize: whei / 20 })
    $(window).resize(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 20 })
    });
  });
</script>
<script type="text/javascript" src="/static/bigscreen/static/js/echarts.min.js"></script>
<script language="JavaScript" src="/static/bigscreen/static/js/js.js"></script>

<body>
  <div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="/static/bigscreen/static/js/index.html" style="width: 100%; height: 100%"></iframe>
  </div>
  <div class="loading">
    <div class="loadbox"> <img src="/static/bigscreen/static/picture/loading.gif"> 页面加载中... </div>
  </div>  <div style="position: absolute; top:10px; left: 10px; z-index: 1000;">
    <select id="yearSelect" style="background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 1px; font-size: 0.2rem; width: auto;" onchange="saveSelectedYear(this.value)">
      {% for year in years %}
      <option value="{{ year }}" style="background: rgba(0,0,0,0.5);">{{ year }}年</option>
      {% endfor %}
    </select>
  </div>
  <div class="head">
    <h1>我国主要农作物产量分析可视化平台</h1>
    <div class="weather" style="float: right;">
      <span id="showTime"></span>
    </div>

    <script>
      var t = null;
      t = setTimeout(time, 1000);//開始运行
      function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }

    </script>


  </div>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">产量前10的农作物</div>
          <div class="allnav" id="echart1"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">播种前10的农作物</div>
          <div class="allnav" id="echart2"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle">受灾、产量、播种对比</div>
          <div style="height:100%; width: 100%;">
            <div class="allnav" id="echart3"></div>
          </div>
          <div class="boxfoot">

          </div>
        </div>
      </li>
      <li>
        <div class="bar">
          <div class="barbox">
            <ul class="clearfix">
              <li class="pulll_left counter" id="shishi">0</li>
              <li class="pulll_left counter" id="shishixiaoshou">0</li>
            </ul>
          </div>
          <div class="barbox2">
            <ul class="clearfix">
              <li class="pulll_left">全国总播种面积(千公顷)</li>
              <li class="pulll_left">全国总产量(万吨)</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"><img src="/static/bigscreen/static/picture/lbx.png"></div>
          <div class="map2"><img src="/static/bigscreen/static/picture/jt.png"></div>
          <div class="map3"><img src="/static/bigscreen/static/picture/map.png"></div>
          <div class="map4" id="map_1"></div>
        </div>
      </li>
      <li>
        <div class="boxall" style="height:3.4rem">
          <div class="alltitle" id="echart4_tl">农作物产量分析</div>
          <div class="allnav" id="echart4"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle" id="echart5_tl" >播种面积分析</div>
          <div class="allnav" id="echart5"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3rem">
          <div class="alltitle">全国受灾情况</div>
          <div class="allnav" id="echart6"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="back"></div>
  <script type="text/javascript" src="/static/bigscreen/static/js/china.js"></script>
  <script type="text/javascript" src="/static/bigscreen/static/js/area_echarts.js"></script>
</body>

</html>

<script>
  // 保存选中的年份到localStorage并刷新页面
  function saveSelectedYear(year) {
    localStorage.setItem('selectedYear', year);
    localStorage.setItem('api', 'http://127.0.0.1:5000'); 
    window.location.reload();
  }

  // 页面加载时读取保存的年份
  window.onload = function() {
    var savedYear = localStorage.getItem('selectedYear');
    if (savedYear) {
      document.getElementById('yearSelect').value = savedYear;
    }
  }
</script>
